<template>
  <div class="bg" ref="bg">
    <video v-if="isIos" class="video" :src="src" :play-status="state"></video>

    <scroller class="all" show-scrollbar="false">
        <div ref="wrapper" v-if="height>0">

          <div class="allab" :style="{'height':height}" v-if="speed<100">
            <LImage class="img-bg" :src="Config.img('2201_bg.png')"></LImage>
            <LImage class="img-loading"  :src="Config.img('active2201_loading.gif')"></LImage>
            <text class="font30 text1 tCenter">{{speed+'%'}}</text>
            <text class="font24 text1 tCenter">{{'年报需要历史数据计算，请耐心等待'}}</text>
            <text class="font22 text1" style="position:absolute; bottom:40px;">{{'版本 v1.3'}}</text>
          </div>
          <template v-else-if="data.reportFirstJson.isOpenStrategy">
            <ActiveYear0 :style="{'height':height}" :data="data" @ot="otClick"></ActiveYear0>
            <ActiveYear1 :style="{'height':height}" :data="data" @ot="otClick"></ActiveYear1>
            <ActiveYear2 :style="{'height':height}" :data="data" @ot="otClick"></ActiveYear2>  
            <ActiveYear3 :style="{'height':height}" :data="data" @ot="otClick"></ActiveYear3>
            <ActiveYear4 :style="{'height':height}" :data="data" @ot="otClick"></ActiveYear4>
            <ActiveYear5 :style="{'height':height}" :data="data" @ot="otClick"></ActiveYear5>
            <ActiveYear6 :style="{'height':height}" :data="data" @ot="otClick"></ActiveYear6>
            <ActiveYear7 :style="{'height':height}" :data="data" @ot="otClick"></ActiveYear7>
            <ActiveYear8 :style="{'height':height}" :data="data" @ot="otClick"></ActiveYear8>
            <ActiveYear9 :style="{'height':height}" :data="data" @share="shareClick"></ActiveYear9>
          </template>
          <template v-else>
            <ActiveYearx0 :style="{'height':height}" :data="data" @ot="otClick"></ActiveYearx0>
            <ActiveYearx8 :style="{'height':height}" :data="data" @ot="otClick"></ActiveYearx8>
          </template>
        </div>
    </scroller>

    <div class="bg" @touchstart="touchstart"  @touchend="touchend">
      <div class="all"></div>
      <div class="but" @stopPropagation="stopPropagation" @click="otClick(page+1)"></div>
    </div>

  
  <template v-if="isIos">
    <LImage v-if="state == 'play'" class="yinyue" 
    :src="Config.img('2201_yinyue_yes.png')" 
    @stopPropagation="stopPropagation" @click="pauseClick"></LImage>
    <LImage v-else class="yinyue" 
    :src="Config.img('2201_yinyue_no.png')" 
    @stopPropagation="stopPropagation" @click="playClick"></LImage>
  </template>

  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
  /*position 定位*/
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .video {
    position: absolute;
    width: 1px;
    height: 1px;
  }
  .yinyue {
    position: absolute;
    right: 40;
    top: 40;
    width: 60px;
    height: 60px;
  }
  .but {
    height: 220px;
  }

  .allab {
    width: 750px;
    justify-content: center;
    align-items: center;
  }
  .img-loading {
    width: 350px;
    height: 298px;
    margin-top: -200px;
  }
  .img-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
</style>

<script>
import ActiveYear0 from "@/active2201/ActiveYear0"; 
import ActiveYear1 from "@/active2201/ActiveYear1"; 
import ActiveYear2 from "@/active2201/ActiveYear2"; 
import ActiveYear3 from "@/active2201/ActiveYear3"; 
import ActiveYear4 from "@/active2201/ActiveYear4"; 
import ActiveYear5 from "@/active2201/ActiveYear5"; 
import ActiveYear6 from "@/active2201/ActiveYear6"; 
import ActiveYear7 from "@/active2201/ActiveYear7"; 
import ActiveYear8 from "@/active2201/ActiveYear8"; 
import ActiveYear9 from "@/active2201/ActiveYear9"; 

import ActiveYearx0 from "@/active2201/ActiveYearx0"; 
import ActiveYearx8 from "@/active2201/ActiveYearx8"; 

//功能 
import jnavigator from "@/_js/navigator"; 
import jconfig from "@/_js/config"; 
import jmodal from "@/_js/modal"; 
import jhttps from "@/_js/https"; 
import jdebug from "@/_js/debug"; 
const dom = weex.requireModule("dom");

const weexFunction = weex.requireModule("WeexFunction");
weexFunction.setTitle('个人年度报告');

export default {
  
  components: {
    ActiveYear0,
    ActiveYear1,
    ActiveYear2,
    ActiveYear3,
    ActiveYear4,
    ActiveYear5,
    ActiveYear6,
    ActiveYear7,
    ActiveYear8,
    ActiveYear9,

    ActiveYearx0,
    ActiveYearx8
  },

  data() {
    return {
      Config:jconfig,

      src:'https://weex.obs.cn-south-1.myhuaweicloud.com/image/2201_mp3.mp3',
      state:'pause',
      timeout:undefined,
      time:0,

      pageX:0,
      height:0,
      page:0,

      data:undefined,
      speed:0,
      speedx:1,
      speedTime:300,
      isIos:false
    }
  },


  destroyed() {
    this.state = 'pause';
  },
  
  mounted(){

    var config =  weex.config;
    this.isIos = config.env.osName.toUpperCase()!='ANDROID';


    setTimeout(() => {
      dom.getComponentRect(this.$refs.bg, (contentFrame)=>{
        this.height = contentFrame.size.height;
        this.speedRefresh();
        this.httpYear()
      });
    }, 500);
  },

  methods:{
    
    speedRefresh() {
      var speed = this.speed + this.speedx;
      if (!this.data && speed > 89) {
        speed = 89;
      } else if (speed > 100) {
        speed = 100;
      }
      this.speed = speed;
      if (speed == 100)return;
      setTimeout(() => {
        this.speedRefresh();
      }, this.speedTime);
    },

    mp3() {
      this.time++;
      if (this.time > 192) {
        this.state = 'play';
        this.time = 0;
      } else if (this.time > 191) {
        this.state = 'pause';
      }
      this.timeout =  setTimeout(() => {
        this.mp3();
      }, 1000);
    },

    /******************** http*/
    //https年度报告稿
    httpYear(){

      var param = {};
      jhttps.post("activity/annualReport",param,true,(data)=>{
        if(data.status == 200){
          this.data = data.data;
          this.speedx = 6;
          this.speedTime = 200;
          this.playClick();
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    /******************** 手势*/
    stopPropagation(){
      return true;
    },

    touchstart(e) {
      if (Array.isArray(e.changedTouches)) {
        e.changedTouches.forEach(item => {
          this.pageY = item.pageY;
        });
      }
    },

    touchend(e) {
      if (this.page == 0) return;
      if (Array.isArray(e.changedTouches)) {

        e.changedTouches.forEach(item => {
          var pageY = item.pageY;
          var value = this.pageY-pageY;
          if (value<50 && value>-50) return;

          var page = this.page + (this.pageY<pageY?-1:1);
          page = page<0 ? 0 : page;
          page = page>9 ? 9 : page;

          this.otClick(page);
        });
      }
    },

    /******************** 点击*/
    //暂停
    pauseClick() {
      this.state = 'pause';
      clearTimeout(this.timeout);
    },

    //播放
    playClick() {
      this.state = 'play';
      this.mp3();
    },

    //查看
    otClick(page) {
      if (page == 10) {
        var param = {'data':this.data};
        weexFunction.shareWeex('active2201/ActiveYearShare', param);
      } else {
        if (!this.data.reportFirstJson.isOpenStrategy && page >1) return;

        this.page = page;
        var offset = page * this.height;
        dom.scrollToElement(this.$refs.wrapper, {'offset':offset});
      }

      if (this.page == 9) {
        weexFunction.setTitle('你的新年FLAG');
      } else {
        weexFunction.setTitle('个人年度报告');
      }
    }
  }
}
</script>
